﻿@model ViewModels.AccountVM.LoginVM

@{
    ViewBag.Title = "로그인";
}

<style type="text/css">
    .login-box { border: 1px solid blue; -ms-border-radius: 15px; border-radius: 15px; padding:15px; }
</style>
<script lang="javascript" type="text/javascript">
    var rules = {
        txtUserID: "required",
        txtPassword: "required"
    };

    var messages = {
        txtUserID: "ID를 입력해 주세요.",
        txtPassword: "비밀번호를 입력해 주세요."
    };

    $("#form1").validate({
        onchange: true,
        rules: rules,
        messages: messages
    });


    $(document).ready(function() {

        var rememberedId = getCookie("rememberId");

        // 기억된 아이디 호출
        if (rememberedId != "") {
            $("#chkRememberMe").attr("checked", true);
            $("#txtUserID").val(rememberedId);
        }

        $("#btnLogin").click(function () {
            login();
        });

        $("#txtUserID").on("keydown", function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 13) login();
        });

        $("#txtPassword").on("keydown", function(e) {
            var code = (e.keyCode ? e.keyCode : e.which);
            if (code == 13) login();
        });

        $("#btnFaceBookLogIn").on("click", function() {
            document.getElementById("form2").submit();
        });

        var login = function () {
            if ($("#form1").valid()) {
                $.ajax({
                    type: "POST",
                    async: true,
                    url: location.href,
                    data: $("#form1").serialize(),
                    success: function (data) {
                        if (data.Success) {
                            rememberUserID();
                            location.href = data.ReturnUrl ? data.ReturnUrl : "/";
                        } else {
                            //showAlertLayer("Error", data.Message);
                        }
                    },
                    beforeSend: function () {
                        //showLoadingLayer();
                    },
                    complete: function () {
                        //hideLoadingLayer();
                    },
                    error: function(xhr, status, error) {
                        //showAlertLayer(data.Message);
                    }
                });
            }
            return false;
        };
    });
    
    // 아이디 기억하기
    function rememberUserID() {
        var expdate;
        if ($("#chkRememberMe").prop("checked")) {
            expdate = new Date();
            expdate.setTime(expdate.getTime() + 1000 * 3600 * 24 * 30);
            setCookie("rememberId", $("#txtUserID").val(), expdate);
        } else {
            expdate = new Date();
            expdate.setTime(0);
            setCookie("rememberId", "", expdate);
        }
    }
</script>


<div class="row" >
    <div class="col-md-10 col-md-offset-1">
        <div class="row">
            <h3>Sign In</h3>
        </div>
        <div class="row login-box" >
            <div class="col-md-6" style="padding-top:10px;" >
                <span class="h4"><strong>Use other accounts</strong></span><br /><br />
                <span>You can also sign in using your Facebook Account or Google Account.</span><br /><br /><br />
                
                <form id="form2" name="form2" method="POST" action="/member/externallogin" >
                    <input type="hidden" name="returnUrl" value="" />
                    <fieldset id="socialLoginList">
                        <legend style="display:none" ></legend>
                        <button id="btnFaceBookLogIn" type="button" class="btn btn-primary btn-lg active"><b>Login with Facebook</b></button><br />
                    </fieldset>
                </form>

                @*<button type="button" class="btn">Login with Google</button>*@
            </div>
            
            <div class="col-md-6" style="padding-top:10px; " >
                <form id="form1" name="form1" method="POST">
                    @Html.AntiForgeryToken()
                    <fieldset>
                        <legend style="display:none">Using your account</legend>
                        <span class="h4"><strong>Using your account</strong></span><br /><br />
                        <div class="form-group">
                            <input type="text" id="txtUserID" name="UserID" placeholder=" Account" style="width:80%" value="" />
                        </div>
                        <div class="form-group">
                            <input type="password" id="txtPassword" name="Password" placeholder=" Password" style="width:80%" value="" />
                        </div>
                        <div class="form-group">                            
                            <label class="checkbox">
                                <input type="checkbox" id="chkRememberMe" /><span class="h5" >RementerMe</span>
                            </label>
                        </div>
                        <div class="form-group">
                            <button type="button" id="btnLogin" class="btn btn-lg btn-info" style="width:150px" ><b>Sign In</b></button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>
